<div>
<a href="index.php?controller=quizzes&action=quiz_edit" class="btn">Add new</a>
</div>

<div id="example" class="k-content">
    <div id="grid"></div>
    {literal}
    <script>
     _typeshift = false;
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {                              
                        read: {
                            url: "index.php?controller=quizzes&action=get_all_json&ajax_action=1",
                            dataType: "json",
                            contentType: "application/json",
                            data: { zoneParent: "123" },

                            type: "POST"
                        },
                        edit: {
                           
                        },

                        parameterMap: function (data, operation) {
                            return kendo.stringify(data);
                        }

                    },
                    batch: true,
                    schema: {
                        model: {
                        id:"id",
                            fields: {
                                id: {editable: true, type: "number" },
                                title: { editable: true,type: "string" },

                                make_by: { editable: false,type: "string" },
                                
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },
                height: 430,
                width:800,
                filterable: true,
                sortable: true,
                pageable: true,
                navigatable: true,

                columns: [{
                    field:"id",
                    filterable: false
                },
                "Title",
                {
                    field: "make_by",
                    title: "Make by",
                    width:160
                },
                { field: "id", title: " ", template: '<a href="index.php?controller=quizzes&action=quiz_edit&quiz=#=id#" class="btn">Edit</a>', width: "80px" },
                { command: "destroy", title: "&nbsp;", width: 110 }
                ],
                editable: false
            }).find("table").on("keydown", onGridKeydown).on("keyup", function (ev) {
                        if (ev.keyCode == '16') { _typeshift = false };
        });
        });
        function detailInit(e) {
            _current=e.data
            
           // $("<div/>").appendTo(e.detailCell).html("<div>            <input type='text'>            <input type='text'> <input type='text'>            </div>            ");
        }
        
        
        function onGridKeydown(e) {
                    if (e.keyCode == '16') { _typeshift = true }
//                   
                    if (e.keyCode === kendo.keys.TAB) {
                        grid = $(this).closest("[data-role=grid]").data("kendoGrid");
                        var current = grid.current();
                        if (!current.hasClass("editable-cell")) {
                            //For next
                            if (!_typeshift) {

                                var nextCell = current.nextAll(".editable-cell");
                                if (!nextCell[0]) {
                                if($(nextCell.context.nextElementSibling).attr("data-role")!="editable")
                                    {
                                    nextCell = nextCell.parent().next().children(".editable-cell:first")
                                    }
                                    //search the next row
                                    var nextRow = current.parent().next();
                                    var nextCell = current.parent().next().children(".editable-cell:first");
                                    //Next page
                                    if (!nextCell[0]) {
                                        if (grid.pager.page() < grid.dataSource.totalPages()) {
                                            grid.pager.page(grid.pager.page() + 1)
                                            currentrow = grid.current().parent()
                                            nextCell = currentrow.children(".editable-cell:first");
                                        }
                                    
                                    }
                                }
                                grid.current(nextCell);
                                grid.editCell(nextCell[0])

                            }
                            else {

                                var prevCell = current.prevAll(".editable-cell");
                                if (!prevCell[0]) {
                                    //search the next row
                                    var prevRow = current.parent().prev();
                                    var prevCell = current.parent().prev().children(".editable-cell:last");
                                }
                                grid.current(prevCell);
                                grid.editCell(prevCell[0])
                            }
                        }
                    }
                };
    </script>
        </div>{/literal}